<!DOCTYPE html>
<html lang="zh-CN">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campus Skills Sharing Platform</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="style/sideNavi.css">
    <link rel="stylesheet" href="style/footer.css">
    <link rel="stylesheet" href="style/searchBox.css">
    <link rel="stylesheet" href="style/topNav.css">
    <link rel="stylesheet" href="style/modal.css">
    <link rel="stylesheet" href="style/forum.css"> 
    <link rel="stylesheet" href="style/loading.css">
    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

    <div class="global-loader" id="globalLoader">
    <div class="loader-ring"></div>
    <p class="loading-text">加载中...</p>
    <div class="progress-bar">
      <div class="progress" id="loaderProgress"></div>
    </div>
  </div>


    <div id="app">
        <!-- 侧边导航栏 -->
        <div class="shell-container">
            <nav class="shell">
                <div class="logo">
                    <i class="fas fa-hands-helping" style="font-size: 32px; color: #4a6bff;"></i>
                    <span class="logo-text">SkillShare</span>
                </div>
                <a href="#post" class="shell__item active">
                    <i class="shell__icon fas fa-home"></i>
                    <span class="shell__title">Home</span>
                </a>
                <a href="#" class="shell__item">
                  <i class="shell__icon fas fa-layer-group"></i>
                    <span class="shell__title">Post List</span>
                </a>
                <a @click="goToProfile" class="shell__item">
                    <i class="shell__icon fas fa-user"></i>
                    <span class="shell__title">Personal Profile</span>
                </a>
                <a href="#postlist" class="shell__item">
                    <i class="shell__icon fas fa-comments"></i>
                    <span class="shell__title">Topic</span>
                </a>
                <a href="#footer" class="shell__item">
                    <i class="shell__icon fas fa-info-circle"></i>
                    <span class="shell__title">About Us</span>
                </a>
                <a href="#footer" class="shell__item">
                    <i class="shell__icon fas fa-phone-alt"></i>
                    <span class="shell__title">Contact Us</span>
                </a>
            </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航 -->
            <div class="header">
                <div class="top-nav">
                    <a href="#post" class="active">Topic</a>
                 <a onclick="handlePortRedirect()">Post List</a>
                    <a @click="goToProfile">Personal Profile</a>
                    <a href="#postlist">Topic</a>
                    <a href="#footer">About Us</a>
                    <a href="#footer">Contact Us</a>
                </div>
                <div class="auth-buttons">
                    <!-- Vue搜索框组件 -->
                    <div class="search-container">
                        <div class="search-box">
                            <input
                                class="search-txt"
                                type="text"
                                placeholder="type to search the post"
                                v-model="searchText"
                                @keyup.enter="handleSearch"
                                @input="handleInput"
                            />
                            <button class="search-btn" @click="handleSearch" aria-label="搜索">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 动态显示登录状态 -->
                    <div v-if="currentUser.username" class="user-info-nav">
                        <span class="welcome-text">Welcome，{{ currentUser.username }}</span>
                        <button class="btn btn-primary" @click="goToProfile">Person Center</button>
                        <button class="btn btn-logout" @click="logout">Drop</button>
                    </div>
                    <div v-else class="auth-buttons-guest">
                        <button class="btn btn-login" @click="login">Login</button>
                        <button class="btn btn-register" @click="register">Register</button>
                    </div>
                </div>
            </div>

            <!-- 论坛内容 -->
            <div class="forum-container" id="post">
                <!-- 左侧主内容区域 -->
                <div class="main-column">
                    <!-- 帖子列表 -->
                    <div class="card">
                        <h2 class="section-title">Latest Posts</h2>
                        <div class="post-list">
                            <div class="post-item">
                                <div class="post-votes">
                                    <button class="vote-btn"><i class="fas fa-arrow-up"></i></button>
                                    <div class="vote-count">42</div>
                                    <button class="vote-btn"><i class="fas fa-arrow-down"></i></button>
                                </div>
                                <div class="post-content">
                                    <h3 class="post-title">Dream Journey to the West Share</h3>
                                    <p class="post-excerpt">Dream Journey to the West is an action-packed RPG that combines classic Chinese mythology with exciting combat mechanics. Having spent 100+ hours mastering this game...</p>
                                    <div class="post-meta">
                                        <span><i class="far fa-user"></i> Ultraman</span>
                                        <span><i class="far fa-clock"></i> 2 hours ago</span>
                                        <span><i class="far fa-comment"></i> 15 comments</span>
                                    </div>
                                    <div class="post-tags">
                                        <span class="tag">Python</span>
                                        <span class="tag">Data Analysis</span>
                                        <span class="tag">Study Group</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="post-item">
                                <div class="post-votes">
                                    <button class="vote-btn"><i class="fas fa-arrow-up"></i></button>
                                    <div class="vote-count">28</div>
                                    <button class="vote-btn"><i class="fas fa-arrow-down"></i></button>
                                </div>
                                <div class="post-content">
                                    <h3 class="post-title">Honkai: Star Rail</h3>
                                    <p class="post-excerpt">Whether you're a seasoned veteran or just stepping foot on the Astral Express, there's always something new to learn in HoYoverse's incredible sci-fi RPG. I've sunk a ridiculous amount of time into this game and wanted to share some key insights that have dramatically improved my experience.</p>
                                    <div class="post-meta">
                                        <span><i class="far fa-user"></i> Designer Li</span>
                                        <span><i class="far fa-clock"></i> 5 hours ago</span>
                                        <span><i class="far fa-comment"></i> 23 comments</span>
                                    </div>
                                    <div class="post-tags">
                                        <span class="tag">UI Design</span>
                                        <span class="tag">Learning Resources</span>
                                        <span class="tag">Experience Sharing</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="post-item">
                                <div class="post-votes">
                                    <button class="vote-btn"><i class="fas fa-arrow-up"></i></button>
                                    <div class="vote-count">35</div>
                                    <button class="vote-btn"><i class="fas fa-arrow-down"></i></button>
                                </div>
                                <div class="post-content">
                                    <h3 class="post-title">Operation Delta</h3>
                                    <p class="post-excerpt">Master the art of tactical synchronization: In Delta Force operations, victory belongs to those who move as one, strike with precision, and vanish without a trace.</p>
                                    <div class="post-meta">
                                        <span><i class="far fa-user"></i> Liu Bei</span>
                                        <span><i class="far fa-clock"></i> Yesterday</span>
                                        <span><i class="far fa-comment"></i> 18 comments</span>
                                    </div>
                                    <div class="post-tags">
                                        <span class="tag">Tomb Raiding</span>
                                        <span class="tag">Special Forces Operator</span>
                                        <span class="tag">Battlefield</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                   <!-- 热门版块 -->
                    <div class="card" id="postlist">
                        <h2 class="section-title">Hot Topics</h2>
                        <div class="post-list">
                            <a href="discussion.html" style="text-decoration: none; color: inherit;">
                                <div class="post-item">
                                    <div class="post-votes">
                                        <button class="vote-btn"><i class="fas fa-arrow-up"></i></button>
                                        <div class="vote-count">67</div>
                                        <button class="vote-btn"><i class="fas fa-arrow-down"></i></button>
                                    </div>
                                    <div class="post-content">
                                        <div class="post-title-container">
                                            <h3 class="post-title">How to balance academics and club activities? Share your time management tips.     <span class="post-tag hot-tag"><i class="fas fa-fire"></i> Hot</span></h3>
                                        </div>
                                        <p class="post-excerpt">In college life, both academics and club activities are important, but time is limited. Does anyone have any good time management tips to share?...</p>
                                        <div class="post-meta">
                                            <span><i class="far fa-user"></i> Alfred</span>
                                            <span><i class="far fa-clock"></i> one day ago</span>
                                            <span><i class="far fa-comment"></i> 42 comments</span>
                                        </div>
                                        <div class="post-tags">
                                            <span class="tag">Study Skills</span>
                                            <span class="tag">Time Management</span>
                                            <span class="tag">College Life</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧边栏（用户卡片和活动通知） -->
                <div class="sidebar">
                    <!-- 用户信息 -->
                    <div class="card user-card">
                        <div class="user-avatar" :style="{ background: currentUser.username ? 'var(--gradient)' : '#ccc' }">
                            <i class="fas fa-user"></i>
                        </div>
                        <h3 class="user-name">{{ currentUser.username || '游客用户' }}</h3>
                        <p class="user-title">{{ currentUser.username ? '欢迎回来！' : '欢迎加入我们的社区' }}</p>
                        <div class="user-stats">
                            <div class="stat">
                                <div class="stat-value">{{ userStats.posts || 0 }}</div>
                                <div class="stat-label">Post</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">{{ userStats.comments || 0 }}</div>
                                <div class="stat-label">Comment</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">{{ userStats.follows || 0 }}</div>
                                <div class="stat-label">Follow</div>
                            </div>
                        </div>
                        <button 
                            class="btn" 
                            :class="currentUser.username ? 'btn-primary' : 'btn-register'" 
                            @click="goToProfile"
                        >
                            {{ currentUser.username ? '我的页面' : '立即登录' }}
                        </button>
                    </div>

                    <!-- 活动通知 -->
                    <div class="card">
                        <h2 class="section-title">Platform Activities</h2>
                        <div class="post-list">
                            <div class="post-item" data-modal-target="modal1">
                                <div class="post-content">
                                    <h3 class="post-title">This Saturday: Coding Marathon Event</h3>
                                    <p class="post-excerpt">Welcome to the campus programming marathon! Team up with classmates to complete exciting projects...</p>
                                    <div class="post-meta">
                                        <span><i class="far fa-clock"></i> This Saturday at 2:00 PM</span>
                                    </div>
                                </div>
                            </div>
                            <div class="post-item" data-modal-target="modal2">
                                <div class="post-content">
                                    <h3 class="post-title">Design Workshop: Introduction to UI/UX Design</h3>
                                    <p class="post-excerpt">Senior Designer Shares UI/UX Design Fundamentals and Career Paths...</p>
                                    <div class="post-meta">
                                        <span><i class="far fa-clock"></i> Next Wednesday at 7:00 PM</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 尾页 -->
        <section id="footer">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Contact Information</h3>
                    <ul class="contact-info">
                        <li><i class="fas fa-map-marker-alt"></i>HNU 24RG1 GROUP3</li>
                        <li><i class="fas fa-phone"></i>138 631 16608</li>
                        <li><i class="fas fa-envelope"></i> danube803@gmai.com</li>
                    </ul>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>Development Team</h3>
                    <ul class="developers">
                        <li>黄圣源/Alfred - Core Interaction</li>
                        <li>蔡蓝硕/David - Document Archiving</li>
                        <li>金李建/Avery - Visual Design</li>
                        <li>卢琮元/Yuan - Components&Functions</li>
                        <li>柳家伟/Kawaiii - API Debugging&Testing</li>
                        <li>赵 聪/Eilidh- Material Collection</li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Development Reference</h3>
                    <ul class="links">
                        <li><a href="https://developer.mozilla.org/" target="_blank">MDN Web Documentation</a></li>
                        <li><a href="https://www.w3schools.com/" target="_blank">W3Schools Online Tutorials</a></li>
                        <li><a href="https://stackoverflow.com/" target="_blank">Stack Overflow Developer Community</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; © 2025 HNU. All rights reserved. | Privacy Policy | Terms of Use</p>
            </div>
        </section>
    </div>

    <!-- 悬浮窗1：编程马拉松详情 -->
    <div class="modal" id="modal1">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">This Saturday: Coding Marathon Event</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="modal-detail">
                    <label>Event Time:</label>
                    <span>This Saturday, 2:00 PM - 8:00 PM (6-hour timed challenge)</span>
                </div>
                <div class="modal-detail">
                    <label>Event Location:</label>
                    <span>Room 201, Building B, Campus Computer Center (Online participation available via Tencent Meeting ID: 123-4567-8901)</span>
                </div>
                <div class="modal-detail">
                    <label>How to Participate:</label>
                    <span>Sign up in teams of 2-4 people by scanning the QR code on the event poster or visiting the Campus Activity Center website to fill out the form (registration closes this Friday at 12:00 PM).</span>
                </div>
                <div class="modal-detail">
                    <label>Event Rewards:</label>
                    <span>Championship Team: Mechanical keyboard per person + custom trophy; Runner-up Team: Wireless mouse per person; Third-place Team: Designer merchandise bundle per person; All participants receive 2 extracurricular credits.</span>
                </div>
                <div class="modal-desc">
                    <p><strong>Event Overview:</strong>This hackathon centers on the theme of “Smart Campus,” encouraging participants to develop innovative applications for campus life scenarios such as academic inquiry, campus navigation, and club management. The event provides a basic development environment and technical support, welcoming both programming novices and seasoned developers to take on the challenge. On-site professional mentors will be available to assist with technical difficulties, and complimentary dinner and beverages will be provided. We warmly invite all programming enthusiasts to actively participate!</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 悬浮窗2：UI/UX设计分享会详情 -->
    <div class="modal" id="modal2">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Design Workshop: Introduction to UI/UX Design</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="modal-detail">
                    <label>Share Time:</label>
                    <span>Next Wednesday, 7:00 PM - 9:00 PM (including a 30-minute interactive Q&A session)</span>
                </div>
                <div class="modal-detail">
                    <label>Share Location:</label>
                    <span>Room 302, Campus Academic Lecture Hall (Online livestream platform: Bilibili account “Campus Design Alliance”)</span>
                </div>
                <div class="modal-detail">
                    <label>Guest Speaker:</label>
                    <span>Li Ran - Senior UI/UX Designer at a leading internet company, with 10 years of design experience. Has spearheaded design iterations for multiple products with tens of millions of users.</span>
                </div>
                <div class="modal-detail">
                    <label>Participation Benefits:</label>
                    <span>On-site participants will receive one physical copy of the UI Design Specifications Manual. Online participants who leave comments and interact may be selected to win design software memberships (Figma/Photoshop monthly subscriptions).</span>
                </div>
                <div class="modal-desc">
                    <p><strong>Share content:</strong>This workshop will explain core UI/UX design concepts from a beginner's perspective, covering: 1. The distinction and connection between UI and UX; 2. Design tool fundamentals (Figma basics demonstration); 3. Design principles and standards (color, typography, interaction logic); 4. The design process from requirements to implementation; 5. Career paths for designers and recommendations for skill development. Whether you're a student looking to get started in design or a non-professional interested in product design, you'll gain practical knowledge to build a systematic understanding of UI/UX design.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏导航项点击效果
        const navItems = document.querySelectorAll('.shell__item');
        navItems.forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                navItems.forEach(nav => nav.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 顶部导航项点击效果
        const topNavItems = document.querySelectorAll('.top-nav a');
        topNavItems.forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                topNavItems.forEach(nav => nav.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 投票按钮效果
        const voteButtons = document.querySelectorAll('.vote-btn');
        voteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const voteCount = this.parentElement.querySelector('.vote-count');
                if (this.querySelector('.fa-arrow-up')) {
                    voteCount.textContent = parseInt(voteCount.textContent) + 1;
                    this.style.color = '#4a6bff';
                    this.disabled = true;
                    this.nextElementSibling.nextElementSibling.disabled = false;
                    this.nextElementSibling.nextElementSibling.style.color = '';
                } else if (this.querySelector('.fa-arrow-down')) {
                    voteCount.textContent = parseInt(voteCount.textContent) - 1;
                    this.style.color = '#ff6b6b';
                    this.disabled = true;
                    this.previousElementSibling.previousElementSibling.disabled = false;
                    this.previousElementSibling.previousElementSibling.style.color = '';
                }
            });
        });
    </script>
    <script src="js/login.js"></script>
    <script src="js/modal.js"></script>
    <script src="js/navToggle.js"></script>
    <script src="js/headNavToggle.js"></script>
    <script src="js/goToHexo.js"></script>
    <script src="js/loading1.js"></script>
</body>
</html>